<template>
  <div class="LoginView">
    <div class="userInfo">
      <div style="margin-bottom: 90px;">
        <h1 class="title">用户管理系统</h1>
        <div class="titdiv">
          <div class="titdiv1"></div>
          <div class="titdiv2"></div>
        </div>
      </div>
      <div class="userMsg">
        <el-input prefix-icon="iconfont icon-xblt-kefu"
                  v-model="username"
                  placeholder="请输入用户名"
                  type="text"
                  @blur="zhBlur"></el-input>
      </div>
      <div class="zhhelp"
           ref="zhRef">账号不能为空</div>
      <div class="userMsg">
        <el-input prefix-icon="iconfont icon-xblt-lock"
                  v-model="password"
                  placeholder="请输入密码"
                  type="password"
                  @blur="mmBlur"></el-input>
      </div>
      <div class="mmhelp"
           ref="mmRef">密码不能为空</div>
      <div class="code">
        <!-- ：fresh：父组件向子组件传送刷新验证码的信号；
        @makedCode：子组件向父组件传送验证码的值-->
        <el-input v-model="yzm"
                  placeholder="请输入验证码"
                  type="text"
                  @keyup.enter.native="handleLogin"
                  @blur="yzmBlur"></el-input>
        <div @click="refreshCode">
          <s-identify :fresh="flag"
                      @makedCode="getMakedCode"></s-identify>
        </div>
      </div>
      <div class="yzmhelp"
           ref="yzmRef">验证码不能为空</div>
      <div style="height:50px">
        <div style="float:left">
          <el-checkbox v-model="checked">记住用户名</el-checkbox>
        </div>
        <div style="float:right;color: #409EFF;">
          <span>
            <a class="RemberPassword"
               @click="RemberPassword()">忘记密码</a>
          </span>
          <span>|</span>
          <span>
            <a class="clickRegister"
               @click="register()">注册</a>
          </span>
        </div>
      </div>
      <div class="loginBtn">
        <el-button type="primary"
                   @click="handleLogin"
                   :loading="loading">登录</el-button>
      </div>
      <div>&nbsp;</div>
    </div>
  </div>
</template>

<script>
import * as sysTool from '../js/systemTool'
import * as cookie from '../js/cookie'
import SIdentify from '../components/Components/identify'
// import Size from '../assets/modelData/Size.json'
// import qs from 'qs'
export default {
  name: 'LoginView',
  data () {
    return {
      username: '',
      password: '',
      loading: false,
      zhIsShow: false,
      mmIsShow: false,
      ip: '1.1.1.1',
      area: '西安市',
      brower: 'chrome',
      os: 'windows7',
      flag: true, // 该值变化，就会触发刷新
      code: '', // 刷新后的验证码
      yzm: '',
      checked: false
    }
  },

  // 验证码初始化
  components: {
    SIdentify
  },
  created () {
    var storage = window.localStorage
    if (storage['userName'] !== undefined && storage['userName'] !== '') {
      this.checked = true
      this.username = storage['userName']
    }
    console.log('storage', storage['userName'])
    var userName = cookie.getCookie('userName')
    console.log('Login.vue  userName', userName)
    if (userName === '' || userName == null) {
      console.log('没登录')
      this.$router.push('/login')
    } else {
      console.log('登录')
      this.$router.push('/')
    }
  },
  mounted () {
    this.flag = !this.flag
  },
  methods: {
    // 登录按钮
    handleLogin () {
      // 账号校验
      if (this.username === '') {
        this.$refs.zhRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '账号不能为空'
        })
        return false
      }
      if (this.username.length < 6) {
        this.$message({
          type: 'error',
          message: '账号最小长度为6位'
        })
        return false
      }

      // 密码校验
      if (this.password === '') {
        this.$refs.mmRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '密码不能为空'
        })
        return false
      }
      if (this.password.length < 6) {
        this.$message({
          type: 'error',
          message: '密码最小长度为6位'
        })
        return false
      }

      // 验证码校验
      if (this.yzm === '') {
        this.$refs.yzmRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '验证码不能为空'
        })
        return false
      }

      // 登录按钮等待效果初始化
      const loading = this.$loading({
        lock: true,
        text: '正在登录...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      // 请求接口
      setTimeout(() => {
        // 获取本机信息
        this.ip = sessionStorage.getItem('ip')
        this.area = sessionStorage.getItem('area')
        this.brower = sysTool.GetCurrentBrowser()
        this.os = sysTool.GetOs()
        console.log('ip，地区，浏览器，操作系统，：', this.ip, this.area, this.brower, this.os)
        var data = {
          Method: 'Login',
          Name: this.username,
          Password: this.password,
          Device_ID: this.os,
          Platform: this.brower
        }
        var msg = JSON.stringify(data)
        var data2 = new FormData()
        data2.append('content', msg)
        // document.cookie = 'userName=hello' //
        // this.$router.push('/') //
        var url = 'api/member/login.php'
        this.axios.post(url, data2).then((res) => {
          console.log('resLogin', res)
          if (res.data.Result === 'OK') {
            // 判断验证码
            if (this.yzm === this.code) {
              // 将登陆获得的参数加入cookie，并登录页面
              var userName = res.data.Data.Nickname
              document.cookie = 'userName=' + userName
              document.cookie = 'userAccountNumber=' + this.username
              document.cookie = 'userAccountPassword=' + this.password
              document.cookie = 'userAccountType=' + res.data.Data.Type
              var storage = window.localStorage
              if (this.checked) {
                storage['userName'] = this.username
              } else {
                storage['userName'] = ''
                this.checked = false
              }
              this.$router.push('/')
            } else {
              this.$message.error('验证码错误')
            }
          } else {
            this.$message.error('用户名或密码错误')
          }
        }).catch(error => {
          this.$message.error('登录失败！请联系管理员...')
          console.log(error)
        })
        loading.close()
      }, 2000)
    },

    // 立即注册
    register () {
      const loading = this.$loading({
        lock: true,
        text: '请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        this.$router.push('/register')
        loading.close()
      }, 1000)
    },

    // 忘记密码
    RemberPassword () {
      const loading = this.$loading({
        lock: true,
        text: '请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        this.$router.push({
          name: 'password',
          params: {
            username: this.username
          }
        })
        loading.close()
      }, 1000)
    },

    // 账号失去焦点验证
    zhBlur () {
      if (this.username === '') {
        this.$refs.zhRef.style.visibility = 'visible'
        return false
      } else {
        this.$refs.zhRef.style.visibility = 'hidden'
      }
      if (this.username.length >= 6) {
        this.$refs.zhRef.style.visibility = 'hidden'
      } else {
        this.$refs.zhRef.innerHTML = '账号最小长度为6位'
        this.$refs.zhRef.style.visibility = 'visible'
      }
    },

    // 密码失去焦点验证
    mmBlur () {
      if (this.password === '') {
        this.$refs.mmRef.style.visibility = 'visible'
        return false
      } else {
        this.$refs.mmRef.style.visibility = 'hidden'
      }
      if (this.password.length >= 6) {
        this.$refs.mmRef.style.visibility = 'hidden'
      } else {
        this.$refs.mmRef.innerHTML = '密码最小长度为6位'
        this.$refs.mmRef.style.visibility = 'visible'
      }
    },
    // 切换验证码
    refreshCode () {
      this.flag = !this.flag
    },
    getMakedCode (code) {
      this.code = code
      // console.log('getMakedCode:', this.code)
    },

    // 验证码失去焦点验证
    yzmBlur () {
      if (this.password === '') {
        this.$refs.yzmRef.style.visibility = 'visible'
      } else {
        this.$refs.yzmRef.style.visibility = 'hidden'
      }
    }
  }
}
</script>

<style scoped>
.LoginView {
  position: absolute;
  background-image: url("../assets/images/login/1.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100%;
  width: 100%;
}
.userInfo {
  position: absolute;
  width: 350px;
  padding: 35px;
  left: 53%;
  top: 30%;
  margin-top: -50px;
}
.title {
  margin-bottom: 35px;
  color: #505458;
}
.titdiv div {
  float: left;
  height: 3px;
}
.titdiv1 {
  background-color: #409eff;
  height: 3px;
  width: 175px;
}
.titdiv2 {
  background-color: #f2f6fc;
  height: 3px;
  width: 175px;
}
.userMsg {
  font-size: 14px;
  height: 40px;
  margin-bottom: 15px;
}
.userMsg span {
  line-height: 40px;
}
.userMsg .el-input {
  flex: 1;
}
.loginBtn {
  display: flex;
  justify-content: center;
}
.loginBtn .el-button {
  width: 100%;
}
.zhhelp {
  position: relative;
  top: -10px;
  color: red;
  font-size: 10px;
  visibility: hidden;
  margin-bottom: 20px;
}
.mmhelp {
  position: relative;
  top: -10px;
  color: red;
  font-size: 10px;
  visibility: hidden;
  margin-bottom: 20px;
}
.yzmhelp {
  position: relative;
  top: -30px;
  color: red;
  font-size: 10px;
  visibility: hidden;
  margin-bottom: 20px;
}
.code {
  display: flex;
  font-size: 14px;
  height: 40px;
  margin-bottom: 35px;
}
.clickRegister:hover {
  text-decoration: underline;
  cursor: pointer;
  color: #505458;
}
.RemberPassword:hover {
  text-decoration: underline;
  cursor: pointer;
  color: #505458;
}
</style>
<style>
.el-checkbox__label {
  color: #000000;
  font-size: 16px;
}
</style>
